<template>
  <div class="mainList">
    <div class="searchMain">
      <div class="searchPos" :class="{'boxShow': searchHide}">
        <a-form ref="formSearchRef" :model="formSearch" v-if="columnsDistShow">
          <div class="form-main" :class="{'searchHide': searchHide}">
            <div class="form-item">
              <a-form-item field="title" label="标题" label-col-flex="90px" class="searchTop-list">
                  <a-input v-model="formSearch.title" allow-clear placeholder="请输入标题"/>
                </a-form-item>
              <a-form-item field="task_type" label="指令类型" label-col-flex="90px" class="searchTop-list">
                  <a-select  v-model="formSearch.task_type" :max-tag-count="1" :options="columnsDist.dictObj.data.waybill_sea_task_shipment_out" :field-names="{ value: 'key', label: 'title' }"
                  placeholder="请选择指令类型" allow-clear allow-search :virtual-list-props="{height:200}">
                    </a-select>
                </a-form-item>
              <a-form-item field="depot_id" label="仓库" label-col-flex="90px" class="searchTop-list">
                  <a-select  v-model="formSearch.depot_id" :max-tag-count="1" :options="columnsDist.dicthelpApi_depot.data" :field-names="{ value: 'id', label: 'name' }"
                  placeholder="请选择仓库" allow-clear allow-search :virtual-list-props="{height:200}">
                    </a-select>
                </a-form-item>
                <!-- <a-form-item field="car_id" label="车辆" label-col-flex="90px" class="searchTop-list">
                  <a-select  v-model="formSearch.car_id" :max-tag-count="1" :options="columnsDist.dicthelpApi_waybillCarList.data" :field-names="{ value: 'id', label: 'name' }"
                  placeholder="请选择车辆" allow-clear allow-search :virtual-list-props="{height:200}">
                    </a-select>
                </a-form-item> -->
                <a-form-item field="urgent" label="紧急程度" label-col-flex="90px" class="searchTop-list">
                  <a-select  v-model="formSearch.urgent" :max-tag-count="1" :options="columnsDist.dictObj.data.waybill_sea_task_urgent" :field-names="{ value: 'key', label: 'title' }"
                  placeholder="请选择紧急程度" allow-clear allow-search :virtual-list-props="{height:200}">
                    </a-select>
                </a-form-item>
               
                    <a-form-item field="created_at" label="创建时间" label-col-flex="90px" class="searchTop-list">
                      <a-range-picker
                        showTime
                        v-model="formSearch.created_at"
                        :time-picker-props="{
                        defaultValue:['00:00:00','23:59:59']
                        }"
                      />
                    </a-form-item>
            </div>     
            <div class="form-buttom">
              <div>
                <a-button type="primary" html-type="submit" @click="submitSearch" style="margin-right: 10px;">
                  <template #icon>
                    <icon-search/>
                  </template>
                  搜索
                </a-button>
                <a-button @click="resetSearch">
                  <template #icon>
                    <icon-delete/>
                  </template>
                  重置
                </a-button>
              </div>      
              <a-space class="lg:mt-0 mt-2" style="margin-top: 20px;display: flex;justify-content: flex-end;margin-right: 10px">         
                  <a-tooltip content="显隐搜索"><a-button shape="circle" @click="searchHide=!searchHide"  style="margin-right: 10px"><icon-search/></a-button></a-tooltip>
                  <a-tooltip content="设置"><a-button shape="circle" @click="openSetting"><icon-settings/></a-button></a-tooltip>
                </a-space>                  
            </div>
          </div>
        
          <div class="touHide" style="display: flex;justify-content: center;margin-bottom: 10px;">  
            <a-link v-if="searchHide" @click="searchHide=!searchHide" size="small">
              {{ searchHide ? '收起':'' }}
              <template #icon>
                <icon-up v-if="searchHide" />
              </template>
            </a-link>
          </div>
          </a-form>
      </div>
    </div>
    <div class="ma-content-block justify-between p-4 mainTable">
          <!-- 操作按钮 -->
          <div class="top-button">
            <div>
                <a-button type="primary" @click="addAction()">
              <template #icon>
                <icon-plus/>
              </template>
              新增
            </a-button>
            </div>
        <a-space class="lg:mt-0 mt-2">         
          <a-tooltip content="显隐搜索"><a-button shape="circle" @click="searchHide=!searchHide" ><icon-search/></a-button></a-tooltip>
          <a-tooltip content="设置"><a-button shape="circle" @click="openSetting"><icon-settings/></a-button></a-tooltip>
        </a-space>
            
        </div>
        <!-- tab切换 -->
        <a-tabs class="ma-tabs mb-1 tabs" @change="clickTap" v-model:active-key="formSearch.status">         
          <a-tab-pane :key="item.key" :title="item.title" v-for="item in shipmentTabs">
            <template #title>
              <slot :name="'tabTitle-' + item.label">{{ item.title }}{{ item.count ? `(${item.count})` : '' }}</slot>
            </template>
          </a-tab-pane>
      </a-tabs>
       <!-- 状态按钮 -->
       <div style="display: flex;">
        <button-group :button-groups="buttonGroups" :dataList="dataList" :crud-ref="crudRef" :selected="selected"
                      :currentStatus="currentStatus"/>
      </div>
      <div ref="tablePrantRef">
      <a-table ref="tableRef" :sticky-header="true" :scrollbar="true" :stripe="true" :scroll="{ x: '100%', y: '100%' }"  :columns="localColumns(columnsData)" :data="dataList" class="table-list" 
    hide-expand-button-on-empty :loading="loading" row-key="id" v-model:selectedKeys="selected" @selection-change="setSelecteds($event)" stripe :row-selection="rowSelection" column-resizable :pagination="false">
      <!--  列表插槽    -->
      <template #title="{ record }">
          {{record.title  }}
          <div v-if="record.task_count>0" :style="{'color' : record.done_count==record.task_count ? 'green':'red'}">
            站内任务 {{record.done_count}}/{{record.task_count}}
          </div>
        </template>
        <template #status="{ record }" v-if="columnsDistShow">{{getDictData('dictObj','waybill_sea_task_status',record.status,2,columnsDist) }}</template> 
        <template #type="{ record }" v-if="columnsDistShow">
          <div v-if="record.type==1">海运订单</div>
          <div v-else-if="record.type==2">空运订单</div>
          <div v-else-if="record.type==3">第三方转入</div>
        </template>
        <template #depot_id="{ record }" v-if="columnsDistShow">{{getDictData('attrApi','dicthelpApi_depot',record.depot_id,3,columnsDist) }}</template>
        <template #task_type="{ record }" v-if="columnsDistShow">{{getDictData('dictObj','waybill_sea_task_shipment_out',record.task_type,2,columnsDist) }}</template> 
        <template #urgent="{ record }" v-if="columnsDistShow">{{getDictData('dictObj','waybill_sea_task_urgent',record.urgent,2,columnsDist) }}</template> 
        <template #car_id="{ record }" v-if="columnsDistShow">{{getDictData('attrApi','dicthelpApi_waybillCarList',record.car_id,3,columnsDist) }}</template>
        <template #fixed="{ record }">
          <a-link  title="编辑" @click="editAction(record)"><icon-edit /></a-link>
          <!-- <a-popconfirm
                    content="确定要删除该数据吗?"
                    position="bottom"
                >
                <a-link title="删除"><icon-delete /></a-link>
          </a-popconfirm> -->
          </template>
      </a-table>
    </div>  
    <!-- 分页 -->
    <div class="foot-list">
      <a-pagination
          :total="pageInfo.total"
          show-total show-jumper show-page-size     
          v-model:current="formSearch.page"
          @change="pageChange"
          @page-size-change="pageSizeChange"
          :page-size-options="[10, 20, 30, 50, 100]"
          :page-size="formSearch.pageSize"
          style="display: inline-flex"
      />
    </div>
    <add-modal-form ref="addModalMormRef" @addClick="tableList" v-if="columnsDistShow"></add-modal-form>
    <setting ref="settingRef"></setting>
  </div>
</div>

</template>
<script setup>
import {ref, reactive, provide, computed, watch,onMounted,h} from 'vue'
import waybillTask from '@/api/abroad/waybillTask'
import AddModalForm from "@/views/abroad/waybillTask/components/addModalForm.vue";
import {getDictData} from "@/utils/crud/dictNew.js";
import ButtonGroup from "@cps/actionsNew/buttonGroup.vue";
import common from "@/api/common.js";
import dicthelpApi from "@/api/dicthelpApi.js";
import Setting from "@/views/components/setting.vue";
import {localColumns,tablePrantRefHeight} from "@/utils/crud/culmns.js";
import tool from '@/utils/tool'
import { color } from 'echarts';
const crudRef = ref()
const addModalMormRef = ref()
const selected=ref([])
const columnsDistShow=ref(false)
const shipmentTabs=ref([])//tabs赋值
const countList=ref({})
const tableRef = ref()
const tablePrantRef = ref() //tabel 父级高度
const dataList = ref([])
const loading=ref(false)
const settingRef = ref()
const columnsDist = ref([])
const formSearchRef=ref(null)
//搜索更多是否显示
const searchHide=ref(false)
const currentStatus = computed(() => {
  let requestParams = formSearch
  if (!requestParams.status) {
    return null;
  }
  return requestParams.status
})
watch([shipmentTabs,countList],
(newValues) => {
  if(shipmentTabs.value!='' && countList.value!=''){
      shipmentTabs.value.forEach(function(item) {
            item.count = countList.value[item.key] ? countList.value[item.key] : 0
      })   
  }
  }
)
const columnsData = ref([  
{title: '标题', dataIndex: 'title',slotName: 'title',width:100,hide:true,align:'center',},
{title: '状态', dataIndex: 'status',slotName: 'status',width:100,align:'center',hide:true,},
{title: '指令类型', dataIndex: 'task_type',slotName: 'task_type',width:70,align:'center',hide:true,},
{title: '仓库', dataIndex: 'depot_id',slotName: 'depot_id',width:70,align:'center',hide:true,},
// {title: '车辆', dataIndex: 'car_id',slotName: 'car_id',width:180,align:'center',hide:true,},
{title: '紧急程度', dataIndex: 'urgent',slotName: 'urgent',align:'center',width:70,hide:true,},
{title: '托盘总数', dataIndex: 'tray_list_count',slotName: 'tray_list_count',align:'center',width:70,hide:true,},
{title: '备注', dataIndex: 'remark',width:100,hide:true,},
{title: '创建日期', dataIndex: 'created_at',width:150,align:'center',hide:true,},
{title: '操作', slotName: 'fixed',fixed: 'right',width: 107,align:'center',hide:true,},
]);


const openSetting=()=>{
  settingRef.value.open()
}
//新增
const addAction=()=>{
  addModalMormRef.value.onShow()
}
//详情
const editAction=(record)=>{
  addModalMormRef.value.onShow(record)
 
}
//总页数
const pageInfo = ref({
  currentPage: 1,
  total: 0,
  totalPage:1
})
//table 选择
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});
//列表请求数据
const formSearch=reactive({
  title:'',
  car_id:'',
  task_type:'',
  urgent:'',
  depot_id: '',
  created_at: [], 
  refresh_tabs: 1,
  page: 1,
  pageSize: 10,
  status: '',
  })
    //重置
  const resetSearch=(e)=>{
    formSearchRef.value.resetFields();
    console.log('formSearch',formSearch)
    tableList()
  }
 //搜索 
 const submitSearch=(e)=>{
  formSearch.page=1
  formSearch.refresh_tabs=1
  searchHide.value=false
  tableList()
}
  //切换分页
const pageChange=(e)=>{
  if(e){
   formSearch.page=e
    tableList()
  }
}
  //切换条数
const pageSizeChange=(e)=>{
  if(e){
  tool.local.set('pageSize', e)
   formSearch.pageSize=e
    tableList()
  }
}
//行数选中
const setSelecteds = (key) => {
  selected.value = key
}
//tabs切换
const clickTap=(e)=>{
  formSearch.page=1
  formSearch.status=e
  formSearch.refresh_tabs=0
    tableList()
}
    //列表
    const tableList = () => {
      loading.value=true
      formSearch.pageSize=tool.local.get('pageSize') || 10
      waybillTask.getList(formSearch).then(res => {  
        dataList.value =  res.data.items
        //页数
        pageInfo.value = res.data.pageInfo
        countList.value=res.data.count   
        formSearch.status=res.data.current_type.toString()
        selected.value=[]
        loading.value=false
        tablePrantRefHeight(tablePrantRef.value)
      })      
    }
  
    onMounted(() => {
      tableList()
    })

const keywordTypes = [
  //  转单号   供应商单号
  {value: 'keywords', label: '单号'},
  // {value: 'public_number', label: '系统提单号'},
  {value: 'shipment_no', label: '运单号'},
  {value: 'outer_carrier_tracking_number', label: '转单号',index:'快递单号'},
  {value: 'ext_number', label: '扩展单号'},
  // {value: 'number', label: '客户单号'},
]
const switchKeywordType = (form,value)=>{
  keywordTypes.map(i=>{
    if(form[i.value] && i.value !== value){
      form[value] = form[i.value]
      form[i.value] = undefined
    }
  })
}
//字典
const waybillColumns= async () => {
  let attrDict=['waybill_sea_task_status','waybill_sea_task_shipment_out','waybill_sea_task_urgent','waybill_sea_task_shipment_operate','AttachmentType']
  let [dictObj,dicthelpApi_depot,dicthelpApi_waybillCarList,dicthelpApi_waybillServiceShipmentTypeList,dicthelpApi_addressChang,dicthelpApi_waybillServiceTaskType]=await Promise.all([
    common.getDicts(attrDict),dicthelpApi.depot({sea:1}), dicthelpApi.waybillCarList(),dicthelpApi.waybillServiceShipmentTypeList(),dicthelpApi.addressChang(0),dicthelpApi.waybillServiceTaskType()
    ])
  return reactive({
        dictObj,
        dicthelpApi_depot,
        dicthelpApi_waybillCarList,
        dicthelpApi_waybillServiceShipmentTypeList,
        dicthelpApi_addressChang,
        dicthelpApi_waybillServiceTaskType
    })
}

waybillColumns().then(res=>{
  console.log('jjjjjjjjjjjj',res)
  columnsDist.value=res
  columnsDistShow.value=true
  let parcelType=res.dictObj.data.waybill_sea_task_status
  if(parcelType){
    let obj={
      id:'',
      title:'全部',
      key:'',
    }    
    parcelType.push(obj)
    shipmentTabs.value=parcelType
  }
})
const buttonGroups = [
{
    title: '审核',
    api: waybillTask.review,
    auth: ['sea:waybillTask:review'],
    hideStatus: [2, 3, 4, 5, 6, 7,8,9, null]
  },
  // {
  //   title: '驳回',
  //   api: waybillTask.turndown,
  //   auth: ['sea:waybillTask:turndown'],
  //   hideStatus: [2, 3, 4, 5, 6, 7,8,9, null]
  // },
  // {
  //   title: '出库',
  //   api: waybillTask.outwarehouse,
  //   auth: ['sea:waybillTask:outwarehouse'],
  //   hideStatus: [1, 3, 4, 5, 6, 7,8,9, null]

  // },
  {
    title: '完成',
    api: waybillTask.close,
    auth: ['sea:waybillTask:close'],
    hideStatus: [1,2, 3, 4, 6, 7,8,9, null]

  },
  {
    title: '待结算',
    api: waybillTask.pendingSettlement,
    auth: ['sea:waybillTask:pendingSettlement'],
    hideStatus: [1,2, 3, 4, 5, 7,8,9, null]

  },
  {
    title: '结算',
    api: waybillTask.settlement,
    auth: ['sea:waybillTask:settlement'],
    hideStatus: [1,2, 3, 4, 5, 6,8,9, null]

  },
  {
    title: '作废',
    api: waybillTask.void,
    status: 'danger',
    auth: ['sea:waybillTask:void'],
    hideStatus: [2, 3, 4, 5, 6, 7,8,9, null]

  },
]
provide('tableList',tableList);
provide('getDictData',getDictData)
provide('columnsData', columnsData)
provide('columnsDist', columnsDist)//全部字典
provide('dataList', dataList)
provide('formSearch', formSearch)
provide('selected', selected)
</script>
<script> export default {name: 'sea:waybillTask'} </script>
<style>
.form-inline-card > .arco-card-body {
  padding: 0;
  display: grid;
  grid: 1fr / 1fr 1fr 1fr;
}

.form-inline-card > .arco-card-header {
  display: none;
}

.fee-up {
  border-bottom: dashed #777777 1px;
}

.fee-down {
  color: orange;
}
.customer-input-item .arco-btn-group button:first-child{
  display:none;
}

.table-list{
  margin-top:5px;
}
.arco-tabs-content{
  padding:0;
}
.foot-list{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mainTable{
  padding-top: 68px;
}
.arco-select-view-inner{
  white-space: nowrap;
}
.arco-select-view-inner .arco-tag{
  white-space: nowrap !important;
}
.tabs .arco-tabs-tab{
  min-width: 70px;
  justify-content: center;
}
</style>